<template>
  <div class="bg-gray-100 min-h-screen flex items-center justify-center">
    <h1 class="text-3xl font-bold text-blue-500">Tailwind Works!</h1>
    <div>
      <div class="p-4 bg-gray-100 rounded-lg">
        <p>当前计数: {{ counter.count }}</p>
        <p>计算属性: {{ counter.doubleCount }}</p>

        <button @click="counter.increment()" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">增加计数</button>

        <button @click="counter.reset()" class="ml-2 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600">重置</button>
      </div>
    </div>

    <div>
      <!-- 使用状态 -->
      <div class="bottom-tabs">
        <button v-for="tab in ['左侧', '菜单测试', '右侧']" :key="tab" :class="{ active: appStore.activeTab === tab }" @click="appStore.updateActiveTab(tab)">
          {{ tab }}
        </button>
      </div>

      <!-- 显示系统时间 -->
      <div class="system-time">
        {{ appStore.formattedTime }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter';
const counter = useCounterStore();

import { onMounted } from 'vue';
// 引入 Store
import { useAppStore } from '@/stores/modules/app';

// 创建 Store 实例
const appStore = useAppStore();

// 模拟更新系统时间
onMounted(() => {
  const updateTime = () => {
    const time = new Date().toLocaleString();
    appStore.updateSystemTime(time);
  };

  updateTime();
  setInterval(updateTime, 1000);
});
</script>

<style scoped lang="scss">
.active {
  color: red;
}
</style>
